<template>
	<div id="clue_manage" class="container">
		<div class="content">
			<!-- <div class="title">{{title}}</div> -->
			<div class="nav_div">
				<div class="nav" :class="param.type==0? 'nav_active':''" @click="selectType(0)">全部线索</div>
				<div class="nav" :class="param.type==1? 'nav_active':''" @click="selectType(1)">分配给我</div>
				<div class="nav" :class="param.type==2? 'nav_active':''" @click="selectType(2)">重要线索</div>
				<div class="nav" :class="param.type==3? 'nav_active':''" @click="selectType(3)">超期线索</div>
				<div class="nav" :class="param.type==4? 'nav_active':''" @click="selectType(4)">公海池</div>
			</div>
			<div class="panel">
				<div class="condition">
					<div class="row_one">
							<el-input style="width: 4.1rem;" :placeholder="placeholder" clearable
			   				 		  v-model="param.keyword" class="input_search" maxlength="100">
			  				</el-input>
							<span class="screen" @click="toggle()"></span>
							&emsp;
							<div class="search_btn" @click="search()" v-if="hasApi('clueList')" >搜索</div>
							
							<div class="right_btn" @click="exportClue()" v-if="hasApi('clueExport')" 
								 :style="{cursor : isExport?'not-allowed' : 'pointer'}">导出线索</div>
							<div class="center_btn" @click="openImport()" v-if="hasApi('clueImport')">导入线索</div>
							<div class="left_btn" @click="openAdd()" v-if="hasApi('clueAdd')">新增线索</div>
					</div>
					<div class="row_two" v-if="param.type!=4">
						<div>
							<span class="condition_name">线索状态</span>
							<!--<el-select v-model="param.clueStatus"
									   clearable style="width: 1.8rem;" placeholder="全部状态">
							    <el-option v-for="item in clueStatusOption" :key="item.value"
							      		   :label="item.name" :value="item.value">
							    </el-option>
							</el-select>-->
							<el-cascader v-model="clueStatus" style="width: 2rem;"
							     :options="clueStatusOption" placeholder="全部状态" clearable>
							</el-cascader>
							&emsp;
							
							<span class="condition_name">意向课程</span>
							<el-select v-model="param.courseId" 
								       clearable style="width: 1.8rem;" placeholder="请选择">
							    <el-option v-for="item in courseList" :key="item.courseId"
							      		   :label="item.courseName" :value="item.courseId">
							    </el-option>
							</el-select>
							  &emsp;
							  
							<span class="condition_name">意向度</span>
							<el-select v-model="param.intentionMode"
								 	   clearable style="width: 1.6rem;" placeholder="请选择">
							    <el-option v-for="item in intentionMode" :key="item.value"
							      		   :label="item.name" :value="item.value">
							    </el-option>
							</el-select>
							&emsp;
							  
							<span class="condition_name">回访日期</span>
						    <el-date-picker v-model="visitDate" @change="visitChange()"
							      style="width: 2.6rem;" type="daterange"
							      align="center"  unlink-panels range-separator="至"
							      start-placeholder="开始日期" end-placeholder="结束日期"
							      value-format= "yyyy-MM-dd" :picker-options="pickerOptions">
							</el-date-picker>
							&emsp;
							
						  	<!--<span class="condition_name">回访记录</span>
							<el-input v-model="param.remark" @input="search()" clearable style="width: 2.2rem;"></el-input>-->
						</div>  
						<div>
						    <span class="condition_name">分配时间</span>
							<el-select v-model="param.assignDate"
								 	   clearable style="width: 2rem;" placeholder="请选择">
							    <el-option  v-for="item in allotList" :key="item.value"
							      			:label="item.name" :value="item.value">
							    </el-option>
							</el-select>
							  
							&emsp;
							<span class="condition_name">渠道来源</span>
							<el-select v-model="param.channelId"
								 	   clearable  style="width: 1.8rem;" placeholder="请选择">
							    <el-option v-for="item in channelList" :key="item.clueChannelId"
							      		   :label="item.name" :value="item.clueChannelId">
							    </el-option>
							</el-select>
							  
							&emsp;
							<span class="condition_name">年&emsp;龄</span>
							<el-select v-model="ageStart" @change="ageStartChange()"
								 	   clearable style="width: 0.73rem;" placeholder="起">
							    <el-option v-for="item in ageStartList" :key="item.value"
							      		  :label="item.name" :value="item.value" v-show="item.show">
							    </el-option>
							</el-select>~<el-select v-model="ageEnd" @change="ageEndChange()"
								 	   clearable style="width: 0.73rem;" placeholder="止">
							    <el-option v-for="item in ageEndList" :key="item.value"
							      		  :label="item.name" :value="item.value" v-show="item.show">
							    </el-option>
							</el-select>
							  
							&emsp;
							<span class="condition_name">录入日期</span>
							<el-date-picker v-model="createDate"  @change="createChange()"
							      style="width: 2.6rem;" type="daterange"
							      align="center"  unlink-panels range-separator="至"
							      start-placeholder="开始日期" end-placeholder="结束日期"
							      value-format= "yyyy-MM-dd" :picker-options="pickerOptions">
							</el-date-picker>
						</div>
					</div>
					
					<div class="row_two" v-else>
						<div>
							<span class="condition_name">渠道来源</span>
							<el-select v-model="param.channelId" @change="search()"
								 	   clearable  style="width: 1.8rem;" placeholder="请选择">
							    <el-option v-for="item in channelList" :key="item.clueChannelId"
							      		   :label="item.name" :value="item.clueChannelId">
							    </el-option>
							</el-select>
							&emsp;
							<span class="condition_name">录入日期</span>
							<el-date-picker v-model="createDate"  @change="createChange()"
							      style="width: 2.6rem;" type="daterange"
							      align="center"  unlink-panels range-separator="至"
							      start-placeholder="开始日期" end-placeholder="结束日期"
							      value-format= "yyyy-MM-dd" :picker-options="pickerOptions">
							</el-date-picker>
						</div>
					</div>
				</div>
				
				<div style="position: relative;">
					<table class="table" cellspacing="0" style="table-layout:fixed;">
						<thead class="thead">
							<tr>
								<td style="width: 1rem;">
									<div class="check" @click="checkAll(isCheckAll)"
										:class="isCheckAll? 'check_active':''">
										<div>全选</div>
									</div>
								</td>
								<td style="width: 1.1rem;">标记</td>
								<td style="width: 2rem;">姓名</td>
								<td style="width: 2rem;">电话</td>
								<td style="width: 2rem;">状态</td>
								<td style="width: 2rem;">渠道来源</td>
								<td style="width: 2rem;">跟单人</td>
								<td style="width: 3rem;">末次回访时间</td>
								<td style="width: 3rem;">末次回访内容</td>
								<td style="width: 3rem;">录入时间</td>
								<td style="width: 2.3rem;">操作</td>
							</tr>
						</thead>
						<tbody class="tbody">
							<tr v-for="item,index in clueList" :class="checkList.indexOf(item.clueId)>-1? 'tr_check':''">
								<td>
									<div v-if="item.clueStatus!=7" class="check" @click="checkClue(item.clueId)"
										 :class="checkList.indexOf(item.clueId)>-1? 'check_active':''"></div>
								</td>
								<td>
									<div class="mark" @click="markClue(index)"
										 :class="item.isMatter==1? 'mark_active':''"></div>
								</td>
								<td>
									<div v-if="item.gender==1" class="sex sex_boy"></div>
									<div v-if="item.gender==2" class="sex sex_girl"></div>
									{{item.realName}}
								</td>
								<td>{{item.phone}}</td>
								<td>
									<span :style="{color : stateColor[item.clueStatus]}">{{clueStatusMap[item.clueStatus]}}</span>
								</td>
								<td>{{item.channelName}}</td>
								<td>{{item.executeUserName}}</td>
								<td>{{item.lastVisitTime}}</td>
								<td v-if="item.lastVisitContent == null">--</td>
								<td v-else style="line-height: 0.52rem;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;overflow: hidden;">{{item.lastVisitContent}}</td>
								<td>{{item.createTime}}</td>
								<!--<td>
									意向课程和意向度
									<div v-for="course in item.courseData">
										{{course.courseName}}
									</div>
								</td>
								<td>
									<div v-for="course in item.courseData">
										<span class="intention" :style="{backgroundColor : intentionColor[course.intentionMode]}"></span>
										{{course.intentionModeName}}
									</div>
								</td>-->
								<td>
									<span class="operate_btn" v-if="item.clueStatus==1 && hasApi('clueAllot')" @click="acceptClue(item)">接管&nbsp;</span>
									
									<span class="operate_btn" v-if="item.clueStatus==1 && hasApi('clueAllot')" @click="openAllot(item)">分配&nbsp;</span>
									
									<span class="operate_btn" v-if="item.clueStatus!=1 && item.clueStatus!=7 && hasApi('visitAdd')"
										  @click="openVisitAdd(item)">回访&nbsp;</span>
									
									<span class="operate_btn" v-if="item.clueStatus==7" @click="openDetail(item)">查看</span>
									<el-popover  v-if="item.clueStatus!=7"
									    placement="bottom-end" trigger="click"
									    v-model="item.operate">
									    <div>
									    	<div class="operate" @click="openDetail(item)">查看</div>
									    	
									    	<div class="operate" v-if="hasApi('clueUpdate')" @click="openEdit(item)">编辑</div>
									    	
									    	<div class="operate" v-if="item.clueStatus!=1 && hasApi('clueAllot')" @click="openAllot(item)">分配线索</div>
									    	
									    	<div class="operate" v-if="hasApi('auditionEnroll')" @click="openAudition(item)">预约试听</div>
									    	
									    	<!--<div class="operate" v-if="item.clueStatus!=1 && hasApi('payMoney')"
									    		 @click="openPayEarnest(item)">交订金</div>-->
									    		 
									    	<div class="operate" v-if="item.clueStatus!=1 && item.clueStatus!=6 && hasApi('clueEnroll')" 
									    		@click="openEnroll(item)">报名</div>
									    		
									    	<div class="operate" v-if="item.clueStatus!=1 && item.clueStatus!=6 && hasApi('clueFree')"
									    		 @click="openRelease(item)">释放线索</div>
									    		 
									    	<div class="operate" v-if="hasApi('visitByClue')" @click="openVisitRecord(item)">回访记录</div>
									    	
									    	<div class="operate" v-if="hasApi('clueUpdate')" @click="openInvalid(item)">标记无效</div>
									    </div>
									    <span class="operate_btn" slot="reference">操作</span>
									    <!--<div class="more" slot="reference"></div>-->
									  </el-popover>
								</td>
							</tr>
						</tbody>
					</table>
					<div class="survey" v-show="param.type==0">
						共{{count}}条线索 &emsp; 
						{{statusNum.signupCount}}个已报名 &emsp;
						{{statusNum.trialCount}}个已试听 &emsp;
						{{statusNum.followingCount}}个跟进中
					</div>
				</div>
				
				<el-pagination
			      layout="total, sizes, prev, pager, next, jumper"
			      @size-change="pageSizeChange"
		      	  @current-change="pageIndexChange"
		      	  :current-page="param.currPage"
			      :total="count">
			    </el-pagination>
			    
				<div class="bottom_btn_div" v-if="param.type!=4">
					<div class="bottom_btn" v-if="hasApi('clueFree')" @click="openRelease()">释放公海</div>
					<div class="bottom_btn" v-if="hasApi('clueAllot')" @click="openAllot()">分配线索</div>
				</div>
				<div class="bottom_btn_div" v-else>
					<div class="bottom_btn" @click="openAllot()">分配线索</div>
				</div>
			</div>
		</div>
		
		<clueAdd ref="clueAdd" @callback="closeAdd" @channelAdd="openChannelAdd"></clueAdd>
		<clueEdit ref="clueEdit" @callback="closeEdit" @channelAdd="openChannelAdd"></clueEdit>
		<clueImport ref="clueImport" @callback="closeImport"></clueImport>
		<clueDetail ref="clueDetail" @openRelease="openRelease" @openEdit="openEdit" @openVisitAdd="openVisitAdd"></clueDetail>
		<clueAllot ref="clueAllot" @callback="closeAllot"></clueAllot>
		<clueRelease ref="clueRelease" @callback="closeRelease"></clueRelease>
		<clueInvalid ref="clueInvalid" @callback="closeInvalid"></clueInvalid>
		<clueEnroll ref="clueEnroll" @callback="closeEnroll"></clueEnroll>
		<clueAudition ref="clueAudition" @callback="closeAudition"></clueAudition>
		<payEarnest ref="payEarnest" @callback="closePayEarnest"></payEarnest>
		<visitRecord ref="visitRecord"></visitRecord>
		<visitAdd ref="visitAdd" @callback="closeVisitAdd"></visitAdd>
		<channelAdd ref="channelAdd" @callback="closeChannelAdd"></channelAdd>
	</div>
</template>

<script>

import clueAdd from './subpage/clue_add'
import clueImport from './subpage/clue_import'
import clueEdit from './subpage/clue_edit'
import clueDetail from './subpage/clue_detail'
import clueAllot from './subpage/clue_allot'
import clueRelease from './subpage/clue_release'
import clueInvalid from './subpage/clue_invalid'
import clueEnroll from './subpage/clue_enroll'
import clueAudition from './subpage/clue_audition'
import payEarnest from './subpage/pay_earnest'
import visitRecord from './subpage/visit_record'
import visitAdd from './subpage/visit_add'
import channelAdd from './subpage/channel_add'

var vm,dict,user;
var $rowTwo;

export default {
	components : {
		clueAdd,clueEdit,clueImport,clueDetail,
		clueAllot,clueRelease,visitRecord,clueInvalid,
		clueEnroll,clueAudition,payEarnest,visitAdd,channelAdd
	},
	data : function() {
		return {
			title : this.$route.name,
			param : {
				keyword : "",
				type : 0,
				clueStatus : "", //线索状态
				cId:"", //报名或试听的课程
				courseId : "",
				intentionMode : "",
				visitTime : "",
				remark : "",
				channelId : "",
				age : "",
				createTime : "",
				assignDate : "",
				campusId : this.$store.state.campusId,
				currPage : 1,
				pageSize : 10,
			},
			clueStatus : [], //线索状态占位变量
			placeholder : "搜索 姓名/家长/电话/跟进人",
			count : null,
			checkList : [],
			clueList : [],
	        intentionColor : {
	        	"1" : "#ff5252", //红色
	        	"2" : "#ffac41", //黄色
	        	"3" : "#19b10d", //绿色
	        },
	        stateColor : {
	        	"1" : "#2e83f6", //蓝色
	        	"2" : "#2e83f6", //蓝色
	        	"3" : "#2e83f6", //蓝色
	        	"4" : "#2e83f6", //蓝色
	        	"5" : "#2e83f6", //蓝色
	        	"6" : "#19b10d", //绿色
	        	"7" : "#ff5252", //红色
	        	"8" : "#2e83f6", //蓝色
	        },
	        allotList : null,
	        ageStartList : [
	        	{name:"0", value:"0", show:true},{name:"1", value:"1", show:true},
	        	{name:"2", value:"2", show:true},{name:"3", value:"3", show:true},
	        	{name:"4", value:"4", show:true},{name:"5", value:"5", show:true},
	        	{name:"6", value:"6", show:true},{name:"7", value:"7", show:true},
	        	{name:"8", value:"8", show:true},{name:"9", value:"9", show:true},
	        	{name:"10", value:"10", show:true},{name:"11", value:"11", show:true},
	        	{name:"12", value:"12", show:true}
	        ],
	        ageEndList : [
	        	{name:"0", value:"0", show:true},{name:"1", value:"1", show:true},
	        	{name:"2", value:"2", show:true},{name:"3", value:"3", show:true},
	        	{name:"4", value:"4", show:true},{name:"5", value:"5", show:true},
	        	{name:"6", value:"6", show:true},{name:"7", value:"7", show:true},
	        	{name:"8", value:"8", show:true},{name:"9", value:"9", show:true},
	        	{name:"10", value:"10", show:true},{name:"11", value:"11", show:true},
	        	{name:"12", value:"12", show:true}
	        ],
	        //辅助数据
	        ageStart : null,
	        ageEnd : null,
	        visitDate : null,
	        createDate : null,
	        //数据字典
	        clueStatusOption : null,
	        intentionMode : null,
	        clueStatusMap : null,
	        //下拉列表数据
	        courseList : [],
	        channelList : [],
	        //新建渠道调用者
	        channelCaller : null,
	        isExport : false,
	        pickerOptions: {
	          shortcuts: [{
	            text: '最近一周',
	            onClick(picker) {
	              const end = new Date();
	              const start = new Date();
	              start.setDate(start.getDate()-6);
	              picker.$emit('pick', [start, end]);
	            }
	          }, {
	            text: '最近一个月',
	            onClick(picker) {
	              const end = new Date();
	              const start = new Date();
	              start.setMonth(start.getMonth()-1);
	              picker.$emit('pick', [start, end]);
	            }
	          }, {
	            text: '最近三个月',
	            onClick(picker) {
	              const end = new Date();
	              const start = new Date();
	              start.setMonth(start.getMonth()-3);
	              picker.$emit('pick', [start, end]);
	            }
	          }, {
	            text: '最近一年',
	            onClick(picker) {
	              const end = new Date();
	              const start = new Date();
	              start.setFullYear(start.getFullYear()-1);
	              picker.$emit('pick', [start, end]);
	            }
	          }]
	        },
			
			//状态数量统计
			statusNum : {}
		}
	},
	computed : {
		isCheckAll : function() {
			var len = 0;
			//统计未失效的线索
			vm.clueList.forEach(function(item) {
				if(item.clueStatus!=7) {
					len++;
				}
			})
			return vm.checkList.length == len && len!=0;
		}
	},
	methods : {
		search : function(currPage) {
			//清空选择列表
	    	vm.checkList = [];
	    	
			vm.param.currPage = currPage || 1;
			var param = vm.param;
			
			//设置线索状态和报名试听课程
			var c = vm.clueStatus;
			param.clueStatus = (c[0]!=null? c[0] : "");
			param.cId = (c[1]!=null? c[1] : "");
			
			//公海池只需要部分参数
			if(param.type == 4) {
				param = {
					type : param.type,
					clueStatus : 1,
					keyword : param.keyword,
					channelId : param.channelId,
					createTime : param.createTime,
					campusId : param.campusId,
					currPage : param.currPage,
					pageSize : param.pageSize,
				}
			}
			
			api.clueList(param).then(function(data) {
				
				data.list.forEach(function(item) {
					item.operate = false;
					item.phone = item.parentData && item.parentData[0]? item.parentData[0].phone : '';
				})
				vm.clueList = data.list;
				vm.count = data.totalCount;
				if(data.object){
					vm.statusNum = data.object;
				}else{
					vm.statusNum = {
						fllowupCount:0,
						followingCount:0,
						signupCount:0,
						trialCount:0
					}
				}
				
			});
		},
		campusChange : function(campusId) { //校区改变
			vm.param.campusId = campusId;
			vm.search();
			vm.loadList();
		},
		visitChange : function() { //回访日期改变
			vm.param.visitTime = (vm.visitDate? vm.visitDate[0]+"/"+vm.visitDate[1] : "");
			vm.search();
		},
		createChange : function() { //录入日期改变
			vm.param.createTime = (vm.createDate?vm.createDate[0]+"/"+vm.createDate[1] : "");
			vm.search();
		},
		ageStartChange : function() { //开始年龄发生改变
			//限制结束年龄
			vm.ageEndList.forEach(function(item) {
				if(!vm.ageStart || parseInt(item.value)>=parseInt(vm.ageStart)) {
					item.show = true;
				} else {
					item.show = false;
				}
			})
			
			var age = (vm.ageStart||-1) + "/" + (vm.ageEnd||-1);
			vm.param.age = (age=="-1/-1"? "" : age);
		},
		ageEndChange : function() { //结束年龄发生改变
			//限制开始年龄
			vm.ageStartList.forEach(function(item) {
				if(!vm.ageEnd || parseInt(item.value)<=parseInt(vm.ageEnd)) {
					item.show = true;
				} else {
					item.show = false;
				}
			})
			
			var age = (vm.ageStart||-1) + "/" + (vm.ageEnd||-1);
			vm.param.age = (age=="-1/-1"? "" : age);
		},
		pageSizeChange : function(val) { //页条数改变
	  		vm.param.pageSize = val;
	  		vm.search();
	  	},
	  	pageIndexChange : function(val) { //页码改变
	    	vm.param.currPage = val;
	    	vm.search(val);
	  	},
		selectType : function(type) {
			vm.param.type = type;
			vm.search();
			//重置输入框说明
			vm.placeholder = "搜索 姓名/家长/电话";
			vm.placeholder += (type==4? "" : "/跟进人");
		},
		toggle : function() {
			if($rowTwo.css("display")=="none") {
				$rowTwo.slideDown();
			} else {
				$rowTwo.slideUp();
			}
		},
		checkClue : function(id) {
			//获取勾选列表和当前项的序号
			var c = vm.checkList;
			var index = c.indexOf(id);
			if(index>=0) {
				//如果当前id在已勾选列表,则删除
				c.splice(index,1);
			} else {
				//否则添加
				c.push(id);
			}
		},
		checkAll : function(flag) {
			//清空勾选列表
			vm.checkList = [];
			//如果不是已勾选的,则勾选全部
			if(!flag) {
				vm.clueList.forEach(function(item){
					//筛选未失效的
					if(item.clueStatus!=7) {
						vm.checkList.push(item.clueId);
					}
				})
			}
				
		},
		markClue : function(index) {
			var clue = vm.clueList[index];
			var status = clue.clueStatus;
			var msg = { "1": "待跟进线索不能标记为重要线索",
						"7": "失效线索不能标记为重要线索"};
			
			//失效的线索不处理
			if(status==1 || status==7) {
				tool.message({ showClose: true, message: msg[status], type: 'warning'});
				return;
			}
			var isMatter = (clue.isMatter==1? 0 : 1);
			//执行修改重要标记请求
			api.clueUpdate({
				clueId : clue.clueId,
				isMatter : isMatter
			}).then(function(data) {
				
				clue.isMatter = isMatter;
				//如果当前是重要线索面板（必定是重要→不重要）
				if(vm.param.type == 2) {
					vm.clueList.splice(index,1);
				}
			});
		},
		//接管线索
		acceptClue : function(clue) {
			api.clueAllot({
				uid : user.userId,
				clueIds : [clue.clueId+""]
			}).then(function(data) {
				tool.message({ showClose: true, message: "接管成功", type: 'success' });
				vm.search();
			})
		},
		openAdd : function() {
			vm.$refs.clueAdd.init();
		},
		closeAdd : function() {
			vm.search();
		},
		openEdit : function(clue) {
			clue.operate = false;
			vm.$refs.clueEdit.init(clue);
		},
		closeEdit : function() {
			vm.search();
		},
		exportClue : function() {
			//正在导出中
			if(vm.isExport) {
				return;
			} else {
				vm.isExport = true;
			}
			
			var noti = tool.notify({
	          title: '线索导出处理中...',
	          message: '请稍候，无须重复操作',
	          type: 'info',
	          duration: 0
	        });
	        
			//导出线索
			api.clueExport(vm.param).then(function(response) {
		        //创建二进制文件和a标签
		        var blob = new Blob([response.data], {type: "application/vnd.ms-excel"});
		        var a = document.createElement('a');
		        //赋值文件名和文件
		        a.download = decodeURI(response.headers['content-disposition'].split(';')[1].split('=')[1]);
		        a.href = URL.createObjectURL(blob);
		        document.body.appendChild(a);
		        //触发点击事件,销毁元素
		        var evt = document.createEvent("MouseEvents");
		        evt.initEvent("click", false, false);
		        a.dispatchEvent(evt);
		        document.body.removeChild(a);
		        
		        //关闭通知框
		        noti.close();
		        vm.isExport = false;
		        tool.notify({
		          title: '线索导出成功',
		          message: '请保存至本地',
		          type: 'success',
		          duration: 4000
		        });
			}).catch(function(){
				//关闭通知框
		        noti.close();
		        vm.isExport = false;
			});
		},
		openImport : function() {
			vm.$refs.clueImport.init(); 
		},
		closeImport : function() {
			vm.search();
		},
		openDetail : function(clue) {
			clue.operate = false;
			vm.$refs.clueDetail.init(clue);
		},
		//分配线索
		openAllot : function(clue) {
			//从右边点击
			if(clue) {
				clue.operate = false;
				vm.$refs.clueAllot.init([clue]);
				return;
			}
			//从底部点击
			if(vm.checkList.length == 0) {
				tool.message({showClose:true, message:"请至少选择一条线索", type:'warning'})
				return;
			}
			var list = [];
			vm.clueList.forEach(function(item) {
				if(vm.checkList.indexOf(item.clueId)>-1) {
					list.push(item);
				}
			})
			vm.$refs.clueAllot.init(list);
			
			
		},
		closeAllot : function() {
			vm.search();
		},
		openVisitRecord : function(clue) {
			clue.operate=false;
			vm.$refs.visitRecord.init(clue);
		},
		openVisitAdd : function(clue) {
			vm.$refs.visitAdd.init(clue);
		},
		closeVisitAdd : function(clue) {
			vm.search(vm.param.currPage);
		},
		//打开线索释放子页面
		openRelease : function(clue) {
			//从右边点击
			if(clue) {
				clue.operate=false;
				vm.$refs.clueRelease.init([clue]);
				return;
			}
			//从底部点击
			if(vm.checkList.length == 0) {
				tool.message({showClose:true, message:"请至少选择一条线索", type:'warning'})
				return;
			}
			var list = [];
			var isEnroll = false;
			//循环匹配已勾选的和当前线索列表
			vm.clueList.forEach(function(item) {
				if(vm.checkList.indexOf(item.clueId)>-1) {
					//线索为已报名的,标记,结束循环
					if(item.clueStatus == 6) {
						isEnroll = true;
						return false;
					}
					list.push(item);
				}
			})
			//包含已报名线索,不给释放
			if(isEnroll) {
				tool.message({showClose:true, message:"已报名的线索不允许释放公海", type:'warning'})
			} else {
				vm.$refs.clueRelease.init(list);
			}
			
		},
		closeRelease : function() {
			vm.search();
		},
		openInvalid : function(item) {
			vm.$refs.clueInvalid.init(item);
		},
		closeInvalid : function() {
			vm.search();
		},
		openEnroll : function(clue) {
			clue.operate=false;
			vm.$refs.clueEnroll.init(clue);
		},
		closeEnroll : function() {
			vm.search();
		},
		openAudition : function(clue) {
			clue.operate = false;
			vm.$refs.clueAudition.init(clue);
		},
		closeAudition : function() {
			vm.search();
		},
		openPayEarnest : function(clue) {
			clue.operate=false;
			vm.$refs.payEarnest.init(clue);
		},
		closePayEarnest : function() {
			vm.search();
		},
		openChannelAdd : function(channelCaller) {
			vm.channelCaller = channelCaller;
			vm.$refs.channelAdd.init("clue_manage");
		},
		closeChannelAdd : function(state) {
			vm.$refs[vm.channelCaller].closeChannelAdd(state);
		},
		loadList : function() {
			var campusId = vm.$store.state.campusId;
			
			//清空课程id,渠道id,重新加载下拉列表
			vm.param.courseId = "";
			api.courseList({campusId : campusId}).then(function(data) {
				vm.courseList = data.list;
				
				var list = [{value: "", label: "全部课程"}];
				//遍历课程,整合格式
				vm.courseList.forEach(function(item) {
					list.push({
						value: item.courseId,
						label: item.courseName
					});
				})
				//遍历线索状态
				vm.clueStatusOption.forEach(function(item) {
					//将课程数组放到试听和报名中
					if(item.value == 4 || item.value == 6) {
						item.children = list;
					}
				})
				vm.clueStatusOption = tool.clone(vm.clueStatusOption);
			});
			
			vm.param.channelId = "";
			api.channelList({campusId : campusId}).then(function(data) {
				vm.channelList = data.list;
			});
			
			// api.clueStatusNum({campusId: campusId}).then(function(data) {
			// 	vm.statusNum = data.info;
			// });
		}
	},
	mounted : function() {
		$rowTwo = $(".row_two");
	},
	created : function() {
		vm = this;
		//请求列表数据
		vm.search();
		
		//获取用户和数据字典对象
		dict = tool.getItem(lsKey.dict,true);
		user = tool.getItem(lsKey.user,true);
		
		vm.intentionMode = dict["intention_mode"];
		vm.clueStatusMap = tool.parseDict(dict["clue_status"]);
		
        var statusList = dict["clue_status"];
        //遍历线索状态
        for(let i=0; i< statusList.length; i++) {
        	let s = statusList[i];
        	//级联下拉框的字段要求label
        	s.label = s.name;
        	//把待跟进的选项切掉
        	if(s.value == 1) {
        		statusList.splice(i,1);
        		i--;
        	}
        }
		vm.clueStatusOption = statusList;
		
		//后台加载下拉列表
		vm.loadList();
		
		//今天
		var now = new Date();
		var today = tool.DateToString(now,"yyyy-MM-dd");
		//近三天
		now = new Date();
		now.setDate(now.getDate()-2);
		var threeDay = tool.DateToString(now,"yyyy-MM-dd");
		//近一周
		now = new Date();
		now.setDate(now.getDate()-6);
		var week = tool.DateToString(now,"yyyy-MM-dd");
		//近半月
		now = new Date();
		now.setDate(now.getDate()-14);
		var halfMonth = tool.DateToString(now,"yyyy-MM-dd");
		//近一月
		now = new Date();
		now.setMonth(now.getMonth()-1);
		var month = tool.DateToString(now,"yyyy-MM-dd");
		//近三月
		now = new Date();
		now.setMonth(now.getMonth()-3);
		var threeMonth = tool.DateToString(now,"yyyy-MM-dd");
		
		vm.allotList = [
			{name : "近三天分配", value : threeDay+"/"+today},
			{name : "近一周分配", value : week+"/"+today},
			{name : "近半月分配", value : halfMonth+"/"+today},
			{name : "近一月分配", value : month+"/"+today},
			{name : "近三月分配", value : threeMonth+"/"+today},
			{name : "三个月前分配", value : "0/"+threeMonth}
		]
	}
}
</script>

<style lang="scss">
	#clue_manage {
		.el-input__inner {
			border-radius: 0.08rem;
			font-size: 0.16rem;
			color: #666666;
			height: 0.36rem !important;
			line-height: 0.36rem;
		}
		.el-input__icon {
			line-height: 0.36rem;
		}
		
		.input_search {
			.el-input__inner {
				background-color: rgb(247,248,250);
			}
		}
		.el-range-editor {
			padding: 0 0.05rem 0 0.1rem;
		}
		.el-range-separator {
			padding: 0 ;
			width : 10% ;
			line-height: 0.34rem;
			color: #666666;
		}
		.el-range-input {
			font-size: 0.16rem;
			color: #666666;
			height: 0.3rem;
		    position: relative;
		    top: 0.01rem;
		}
		.el-cascader {
			line-height: 0.36rem !important;
		}
	}
	
</style>
<style scoped src="@/style/module/table.css"></style>
<style scoped src="@/style/clue_manage/clue_manage.css"></style>
